<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
		<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
		<title class="nav-title"></title>
		<link rel="stylesheet" type="text/css" href="css/style.css?v=22323" />
		<link rel="stylesheet" type="text/css" href="css/aui.css?v=22323" />
		<link rel="stylesheet" type="text/css" href="css/swiper-3.4.2.min.css?v=22323" />
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css?v=22323" />
		<script src="js/art-template.js" type="text/javascript" charset="utf-8"></script>
		<!--<script src="//s.url.cn/qqun/qun/qqweb/m/qun/confession/js/vconsole.min.js"></script>-->
		<style type="text/css">
			
			body,html{
				height:auto;
				padding-bottom: 4.2rem;
			}
			
			body:before {
				display: block;
				height: 1px;
				content: '';
			}
			
			.channelTop .getFreeBtn{
				background-color: #fbd454;
				text-align: center;
				color: white;
				padding-top: 1.0rem;
				font-size: 2rem;
				width: 70%;
				border-radius: 6px;
				height: 4.8rem;
				left: 15%;
				position: absolute;
				top:51rem;
			}
			
			.RedeemCodeNum .RedeemCodeNum1{
				font-size: 1.66rem;
				color: #E55551;
				font-weight: bold;
			}
			
			.channelTop .RedeemCodeNum{
				width: 100%;
				left: 0;
				top: 57rem;
				position: absolute;
				font-size: 1.56rem;
				color: black;
				text-align: center;
			}
			
			.channelTop .topDes{
				width: 100%;
				left: 0;
				text-align: center;
				position: absolute;
				font-size: 2.08rem;
				color: #393343;
				font-weight: bold;
				top: 1.6rem;
			}
			
			.channelBottom2 .getFreeBtn1{
				border: 0;
				border-radius: 0;
				width: 100%;
				height: 5rem;
				bottom: 0;
				left: 0;
				position: fixed;
				background-color: #fbd454;
				font-weight: bold;
				font-size: 1.87rem;
				text-align: center; 
				color: #FFFFFF;
				z-index: 80;
			}
			
			.vip_receive{
				position: fixed;
				top: 0; 
				bottom: 0; 
				left: 0; 
				right: 0;
				z-index: 200;
			}
			.vip_receive .follow-mask {
				position: fixed; 
				top: 0; 
				bottom: 0; 
				left: 0; 
				right: 0;
				background: rgba(38,38,38,0.66);
				z-index: 100;
			}
			
			.vip_receive .vip_receive_top{
				position: fixed;
				background-color: white;
				border-radius: 0.83rem;
				top: 25%;
				width: 80%;
				left: 10%;
				height: 28.08rem;
				z-index: 120;
			}
			
			.vip_receive_top .vip_receive_top_title{
				position: absolute;
				top: 1.3rem;
				width: 100%;
				text-align: center;
				font-size: 2.08rem;
				font-weight: bold;
				color: #333333;
			}
			
			.vip_receive_top .vip_receive_top_des{
				position: absolute;
				top: 5.2rem;
				width: 80%;
				left: 10%;
				font-size: 1.56rem;
				color: #333333;
			}
			
			.vip_receive_top .vip_receive_top_img{
				position: absolute;
				top: 10.4rem;
				width: 50%;
				height: auto;
				left: 25%;
			}
			
			.vip_receive .vip_receive_phone{
				background-color: white;
				border-radius: 0.83rem;
				top: 36%;
				position: fixed;
				width: 80%;
				left: 10%;
				height: 17.68rem;
				z-index: 120;
			}
			
			.vip_receive_phone .channel_phoneView{
				border: 1px solid #999999;
				border-radius: 0.52rem;
				left: 10%;
				top: 2.6rem;
				width: 80%;
				height: 5.2rem;
				position: absolute;
				background-color: white;
			}
			
			.channel_phoneView #channel_phoneNum{
				left: 5%;
				top: 0;
				width: 90%;
				height: 4.73rem;
				font-size: 1.87rem;
				color: #666666;
				position: absolute;
				background-color: white;
			}
			
			.vip_receive_phone .get_VIP_btn {
				left: 10%;
				bottom: 2.08rem;
				width: 80%;
				height: 5.2rem;
				position: absolute;
				background-color: #fbd454;
				color: white;
				font-size: 1.87rem;
				border: 0;
				border-radius: 0.52rem;
			}
			
			#warn{
				background: rgba(0, 0, 0, 0.7);
				text-align: center;
				border-radius: 0.26rem;
				color: white;
				position: fixed;
				z-index: 3000;
				top: 45%;
				left: 30%;
				width: 40%;
				height: 4.16rem;
				line-height: 0.1rem;
				display: none;
				padding-top: 2.08rem;
			}
		</style>
	</head>
	<body>
		<div id="channelActivity">
			<div class="channelTop" style="width: 100%;">
				<img src="img/channelActivity_img_15.jpg"/>
				<div class="getFreeBtn" onclick="getFreeBtnClick()"></div>
				<p class="RedeemCodeNum">
					仅剩 <span class="RedeemCodeNum1"></span> 张
				</p>
				<p class="topDes"></p>
			</div>
			<div class="channelMiddle" style="width: 100%;">
				<img src="img/member0.png"/>
				<img src="img/member2.png"/>
			</div>
			<div class="big-shot-slider">
				<div class="swiper-container" id="bigShotBox">
					<div class="swiper-wrapper">
						<div class="swiper-slide">
							<img src="img/cxj.png" style="width: 100%;height: 100%;" />
						</div>
						<div class="swiper-slide">
							<img src="img/fy.png" style="width: 100%;height: 100%;" />
						</div>
						<div class="swiper-slide">
							<img src="img/hxh.png" style="width: 100%;height: 100%;" />
						</div>
						<div class="swiper-slide">
							<img src="img/lcc.png" style="width: 100%;height: 100%;" />
						</div>
						<div class="swiper-slide">
							<img src="img/ww.png" style="width: 100%;height: 100%;" />
						</div>
						<div class="swiper-slide">
							<img src="img/yg.png" style="width: 100%;height: 100%;" />
						</div>
					</div>
				</div>
			</div>
			<div class="channelBottom1">
				<img src="img/member3.png"/>
			</div>
			<div class="channelBottom2 hide" style="display: block; ">
				<button class="getFreeBtn1" onclick="getFreeBtnClick()"></button>
			</div>
			</div>
		</div>
		
		<div class="vip_receive hide">
				<div class="follow-mask"></div>
				<div class="vip_receive_top">
					<p class="vip_receive_top_title"></p>
					<p class="vip_receive_top_des"></p>
					<img class="vip_receive_top_img" src="img/channelctivity_ercode.png"/>
				</div>
				<div class="vip_receive_phone">
					<div class="channel_phoneView">
						<input id="channel_phoneNum" type="tel" placeholder="请输入手机号" maxlength="11" />
					</div>
					<button class="get_VIP_btn">确认领取</button>
				</div>
		</div>
		<div id="warn"></div>
	</body>

<script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
<script src="js/jquery-1.11.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/purl.js"></script>
<script src="js/swiper-3.4.2.jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	document.writeln("<script type=\"text/javascript\" src=\"js/common.js?"+ Math.random() + "\"></scr"+"ipt>");
</script>
<script src="js/md5.js" type="text/javascript" charset="utf-8"></script>
<script src="js/aui-toast.js" type="text/javascript" charset="utf-8"></script>
<script src="js/aui-dialog.js" type="text/javascript" charset="utf-8"></script>
<script src="js/wxrem.js" type="text/javascript" charset="utf-8"></script>

<script type="text/javascript">
	var toast = new auiToast();
	var channelName = GetQueryString('channelName');//渠道名称
	var dayType = GetQueryString('dayType');//天数类型
	var surplusCount;//会员剩余个数
	var isReceive;//是否已经领取会员
	var loadType = 0;//页面加载情况   0  未加载完成   1  加载成功   2  加载失败
	var isClickReceive;
	
	if (!dayType) {
		dayType = 4;
	}
	
	if (!channelName) {
		channelName = "movie";
	}
	
	if (channelName == "movie") {
		$('.nav-title').text("蜜读  ㄨ  我为人民看电影");
		$('.topDes').text("我为人民看电影为你买单");
	}
		
	function _preventDefault(e){
		e.preventDefault();
	}
	
	var updateVIPData = function(type) {
		
		setTimeout(function(){
			if (loadType == 0) {
			   toast.loading({
			      title: "加载中",
			      duration: 2000
		       });
		    }
         },500)
			var url = 'vip/getVipFreeCount?openId=' + openId + "&type=" + dayType + "&channel=" + channelName;
			$.ajax({
				type: "get",
				url: hostUrl + url,
				success: function(data) {
					shareWx('我为人民看电影为你买单，免费领取蜜读VIP听书卡', 'vipShareLog.png', '每天半小时，听懂一本书。');
					surplusCount = data.data.total - data.data.count;//会员剩余个数
					isReceive = data.data.isfree;//是否已经领取会员
					if (surplusCount > 0) {//未领完
						if (isReceive) {//已经领取
							if (isClickReceive) {
								$('.vip_receive_top_title').text("领取成功");
							} else{
								$('.vip_receive_top_title').text("您已领取");
							}
							$('.getFreeBtn').text("您已领取");
							$('.getFreeBtn1').text("您已领取");
							if (dayType == 4) {//15天  类型为4
								$('.vip_receive_top_des').text("您已领取一张15天蜜读VIP听书卡，关注公众号开始听书");
							}
						}else{
							$('.getFreeBtn1').text("免费领取");
							$('.getFreeBtn').text("免费领取");
						}
						
						$('.RedeemCodeNum .RedeemCodeNum1').text(surplusCount);
					} else{//已领完
						$('.RedeemCodeNum').text("很遗憾，蜜读听书卡已领完");
						$('.getFreeBtn').text("关注蜜读公众号查看更多福利");
						('.getFreeBtn1').text("关注蜜读公众号查看更多福利");
						$('.vip_receive_top_title').text("已领完");
						$('.vip_receive_top_des').text("关注蜜读公众号查看更多福利");
					}
					
					if (type == 1) {//领取成功，更新数据
						$('.vip_receive_top').removeClass('hide');
						$('.vip_receive_phone').addClass('hide');
					}
					loadType = 1;
					toast.hide();
				},
				error:function(){
					loadType = 2;
					toast.hide();
				}
			});
		}
	getToken(updateVIPData);
	
	function getFreeBtnClick(){
		if (loadType != 1) {
			return;
		}
		//禁止滑动
		document.body.style.overflow = 'hidden';
		window.addEventListener('touchmove',_preventDefault);
		$('.vip_receive').removeClass('hide');
		if (isReceive || surplusCount <= 0) {//已经领取  或者 会员被领取完
			if (isClickReceive) {
				isClickReceive = false;
				$('.vip_receive_top_title').text("您已领取");
			}
			$('.vip_receive_top').removeClass('hide');
			$('.vip_receive_phone').addClass('hide');
		}else{
			$('.vip_receive_top').addClass('hide');
			$('.vip_receive_phone').removeClass('hide');
		}
	}
	
	$('.follow-mask').click(function(){
			//恢复滑动效果
		document.body.style.overflow = 'auto';
		window.removeEventListener('touchmove', _preventDefault);
		$('.vip_receive').addClass('hide')
	});
		
		//立即领取
		$('.get_VIP_btn').click(function(){
			
			var phone=$('#channel_phoneNum').val();
			var checkPhoneReg = /^1(3[0-9]|4[57]|5[0-35-9]|7[0135678]|8[0-9])\d{8}$/;
			if(!checkPhoneReg.test(phone) || phone.length != 11){
				weekTip("手机号输入有误");
				return;
			}
			
			if (!openId) {
				weekTip("微信授权失败！");
				return;
			}
			var url = ascli(hostUrl + "user/update?token="+token+"&openId=" + openId+'&unauth_phone='+phone);
			toast.loading({
				title: "加载中",
				duration: 2000
			});
			$.ajax({
				type: "get",
				url:url,
				success: function(data) {
					//手机号保存成功后，调免费领取的接口
					getFreeVip()
				}
			});
		});
		
		//免费领取
		var getFreeVip = function() {
			var url = 'product/vip/free?openId=' + openId + "&type=" + dayType + "&channel=" + channelName;
			$.ajax({
				type: "get",
				url: hostUrl + url,
				success: function(data) {
					//领取成功后在此处处理
					isClickReceive = true;
			        updateVIPData(1);
				}
			});
		}
		
		//大咖轮播图
		var bigShotSwiper = new Swiper('.swiper-container', {
			direction: 'horizontal',//滚动方向
			loop: true,//是否循环
			autoplay: "3000",
			slidesPerView: 2,//每页显示几条数据
			// 如果需要分页器
		})
		
		$(window).scroll(function(){
			if ($('body').scrollTop() >= 565) {
				$('.channelBottom2').removeClass('hide')
				$('.channelBottom2').fadeIn()
			} else{
				$('.channelBottom2').fadeOut()
			}
		})
</script>
	
</html>